<template>
  <div>
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">{{ squareList.title }}</font>
      </div>
    </div>
    <!-- 头像信息 -->
    <div class="dark-head">
      <div class="head-img">
        <div :style="{ backgroundImage: 'url(' + squareList.head + ')' }"></div>
      </div>
      <div class="head-name">
        <div class="head-name-user">{{ squareList["nickname"] }}</div>
        <div class="head-name-time">{{ squareList["time"] }}</div>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="dark-content">
      <div class="content-title">{{ squareList.title }}</div>
      <div class="content-time">
        <span class="box_left">{{ squareList.give }}人为该文章点赞</span>
        <span class="box_right">发布于 {{ squareList.create_time }}</span>
      </div>
      <div class="content-cont">
        {{ squareList.graphic }}
      </div>
      <div class="content-picture" v-for="con in squareList.picture" :key="con">
        <div :style="{ backgroundImage: 'url(' + con + ')' }"></div>
      </div>
      <div class="content-hr"></div>
    </div>
    <!-- 底部点赞 -->
    <div class="dark-foot">
      <div class="foot-text">觉得文章不错，就点个赞吧</div>
      <div class="foot-picture">
        <div
          class="foot-give2"
          @click="giveLike(2)"
          v-if="squareList.state"
        ></div>
        <div class="foot-give1" @click="giveLike(1)" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      statusId: "",
      squareList: [
        {
          nickname: "我是小白",
          time: "15小时前",
          head: "/img/myHead.a53bcbe4.png",
          title: "日语培训视频我喜欢",
          create_time: "2020/4/27",
          graphic:
            "我喜欢这个视频，希望老师可以多发些这个类型的课程，给我带来了非常大的启发，关注老师了。可以学习到很多新的情感处理方法。",
          picture: [],
          give: "0"
        }
      ]
    };
  },
  created() {
    this.statusId = this.$route.params.ft_id;
    this.selectSquareDetails();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    giveLike(val) {
      //点赞
      if (val == 1) {
        this.squareList.state = true;
        Toast("点赞成功");
      }
      if (val == 2) {
        this.squareList.state = false;
        Toast("已取消点赞");
      }
      let me = this;
      this.$axios
        .post(
          "/api/square/squareGiveLike",
          { uid: localStorage.uid, ft_id: this.statusId, state: val },
          { emulateJSON: true }
        )
        .then(kun => {
          //console.log(kun);
          if (kun.code == 200) {
            me.squareList.give = kun.data;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectSquareDetails() {
      //获取发帖文章详情
      if (this.statusId == null) {
        this.statusId = localStorage.ft_id;
      }
      Indicator.open({ spinnerType: "fading-circle" });

      let me = this;
      this.$axios
        .post(
          "/api/square/squareDetails",
          { ft_id: this.statusId, uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.squareList = kun.data;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.box_left {
  float: left;
}
.box_right {
  float: right;
}
//头部
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #1a1a1a;
  position: relative;

  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 1.125rem;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0.65rem;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
}

//头像信息
.dark-head {
  width: 21.5625rem;
  margin: 1rem auto 0;
  height: 3.75rem;
  border-bottom: 1px solid #e6e6e6;

  .head-img {
    width: 2.75rem;
    height: 2.75rem;
    float: left;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/myHead.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  .head-name {
    float: left;
    margin-left: 0.625rem;

    .head-name-user {
      font-size: 0.9375rem;
      color: #343434;
    }
    .head-name-time {
      font-size: 0.75rem;
      color: #9a9a9a;
      margin-top: 0.3125rem;
    }
  }
}

//文章内容
.dark-content {
  width: 21.5625rem;
  margin: 0.625rem auto 0;

  .content-title {
    font-size: 1.125rem;
    color: #1a1a1a;
  }
  .content-time {
    font-size: 0.75rem;
    color: #9a9a9a;
    margin-top: 0.625rem;
    height: 0.75rem;
  }
  .content-cont {
    font-size: 0.9375rem;
    color: #1a1a1a;
    clear: both;
    margin-top: 0.9375rem;
  }
  .content-picture {
    width: 21.5625rem;
    height: 12.125rem;
    margin-top: 0.9375rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/content.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  .content-hr {
    border: 1px solid #e6e6e6;
    width: 21.5625rem;
    margin: 1.5625rem auto 0.9375rem;
  }
}
//底部点赞
.dark-foot {
  width: 21.5625rem;
  margin: 0 auto;

  .foot-text {
    text-align: center;
    font-size: 0.875rem;
    color: #999999;
  }
  .foot-picture {
    width: 4.375rem;
    height: 4.375rem;
    margin: 0.9375rem auto 1.0625rem;
    border-radius: 2.1875rem;

    .foot-give1 {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/give-like.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .foot-give2 {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/give-like1.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
}
</style>
